import React from 'react'
import {
    Form,
    Input,
    Row,
    Col,
    DatePicker,
    message,
    Select,
    Button
} from "antd";
import salaryList from "@/staticLists/salary";
import { salaryRule } from "@/utils/rules";
import { createOption } from "@/utils/selectOption";
import { mapData } from "@/utils/mapData";
import DropPopover from "@/components/DropPopover";
import $http from "@/services";

export default function index({ _initContentPage, setIsShowAdd }) {
    const [form] = Form.useForm();


    //- 表单集合映射
    const groupData = {
        input: (item) => (
            <Input placeholder={item.initVal} />
        ),
        popover: (item) => {
            return (
                <Input
                    readOnly
                    className="border-color"
                    placeholder={item.initVal}
                    addonAfter={
                        <>
                            <DropPopover
                                placeValue={item.labelTxt}
                                interfaced={item.url}
                                searchType={item.type}
                                getnewValue={(obj) => {
                                    const setData = {
                                        [item.itemName]: obj[item.type],
                                        [item.itemName.split('V')[0]]: obj._id,
                                    };
                                    item.itemName === 'currentLevelVal' &&
                                        (setData.standardScore = obj.levelScore);
                                    form.setFieldsValue(setData);
                                    console.log(setData)
                                    // updateAssessDetail("currentLevel", setData.currentLevelVal)
                                }}
                            />
                        </>
                    }
                />
            );
        },
        date: (item) => (
            <DatePicker
                placeholder="请选择入职时间"
                style={{ width: '100%' }}

            />
        ),
        tag: (item) => (
            <Tag>
                {item.itemName === 'departmentName'
                    ? assesDetail.staffName?.department?.departmentName || '--'
                    : formatDate(assesDetail.staffName?.onboardingTime)}
            </Tag>
        ),
        select: (item) => {
            return <Select options={createOption(mapData[item.optionName])}></Select>
        }
    };


    // 创建新的调薪记录
    const createSalary = async (res) => {
        console.log(res)
        const { data, code, msg } = await $http.addSalary(res)
        if (!code) {
            message.success(msg);
            _initContentPage();
            setIsShowAdd(false);
        }
    }

    return (
        <Form
            layout='vertical'
            form={form}
            onFinish={createSalary}
        >
            {salaryList.map((el, index) => {
                return (<Row justify={"space-between"} key={index}>
                    {el.map((item, childIndex) => {
                        return (<Col span={11} key={childIndex} style={{ ...item?.style }}>
                            <Form.Item
                                label={item.labelTxt}
                                name={item.itemName}
                                rules={salaryRule[item.itemName]}
                            >
                                {groupData[item.renderType](item)}
                            </Form.Item>
                        </Col>)
                    })}
                </Row>)
            })}
            <Row justify={"end"}>
                <Col>
                    <Button type='primary' htmlType='submit'>创建</Button>
                </Col>
            </Row>
        </Form>

    )
}
